<template>
  <el-dialog class :title="'游戏属性设置'" :visible.sync="dialogVisible" :close-on-click-modal="false" width="1230px">
    <div class="form-box" v-loading="loading">
      
      <!-- 自定义游戏选择组件 -->
      <div class="tab-box ">
        <div class="tab-cont flex">
          <div class="tab" @click="tabChange(item)" :class="{active:item.id==form.gameId}" v-for="item in gameList" :key="item.id">
            {{item.name}}
          </div>
        </div>
      </div>
      <el-form  :ref="'form'" :model="form" :inline="true" :rules="rules" label-width="auto" class="demo-ruleForm">
        <el-form-item label="系统" prop="systemIdList" v-if="GameSelectedType === 0">
            <el-select v-model="form.systemIdList" placeholder="请选择" clearable multiple collapse-tags>
              <el-option v-for="dict in sysList" :key="dict.id" :label="dict.fieldName" :value="dict.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="运营商" prop="carrierIdList" v-if="GameSelectedType === 0" >
            <el-select v-model="form.carrierIdList" placeholder="请选择" clearable multiple collapse-tags>
              <el-option v-for="dict in carrierList" :key="dict.id" :label="dict.fieldName" :value="dict.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="大区" prop="groupIdList" v-if="GameSelectedType === 1" >
            <el-select v-model="form.groupIdList" placeholder="请选择" clearable multiple collapse-tags>
              <el-option v-for="dict in areaList" :key="dict.id" :label="dict.fieldName" :value="dict.id" />
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="服务器" prop="serverId">
            <el-select v-model="form.serverId" placeholder="请选择" clearable >
              <el-option v-for="dict in serverList" :key="dict.id" :label="dict.fieldName" :value="dict.id" />
            </el-select>
          </el-form-item> -->
          <el-form-item label="价格区间" prop="price" class="mm-b-8">
            <div class="two-input-content">
              <el-input v-model="form.priceStart" class="two-input-item"
                style="width:105px !important"></el-input>
              <span>-</span>
              <el-input v-model="form.priceEnd" class="two-input-item"
                style="width:105px !important"></el-input>
            </div>
          </el-form-item>
            <div v-if="attrs && attrs.length">
              <span v-for="custom in attrs" :key="custom.id">
                <div v-if="custom.fieldType == 'checkbox'"></div>
                <el-form-item :label="custom.fieldName" :prop="custom.aavName" v-if="custom.isEnable === '0'&&custom.isSearch == '1'">
                  <el-input v-model="form[custom.aavName]" :placeholder="`请填写${custom.fieldName}`"
                    v-if="custom.fieldType == 'input'" :id="custom.aavName"/>
                  <div v-if="custom.fieldType == 'number'" class="number-input">
                    <el-input-number v-model="form[custom.aavName+'start']"  :step="0.1" :max="99999" :controls="false"
                    style="text-align: left;width: 100px!important;" :placeholder="`请填写`" :id="custom.aavName"
                    ></el-input-number>
                    <span> - </span>
                    <el-input-number v-model="form[custom.aavName+'end']" :step="0.1" :max="99999" :controls="false"
                    style="text-align: left;" :placeholder="`请填写`"
                    ></el-input-number>
                  </div>
                  <el-date-picker :id="custom.aavName" v-model="form[custom.aavName+'temp']" type="datetimerange" :placeholder="`请选择${custom.fieldName}`"
                    value-format="yyyy-MM-dd hh:mm:ss" v-if="custom.fieldType == 'date'" @change="dateChange($event,custom.aavName)">
                  </el-date-picker>

                  <el-checkbox-group :id="custom.aavName" v-model="form[custom.aavName+'rander']" v-if="custom.fieldType == 'checkbox'" @change="checkboxChange($event,custom.aavName)">
                    <el-checkbox :label="checkItem.id" v-for="checkItem in custom.childAttributes" :value="checkItem.id"
                      :key="checkItem.id">{{ checkItem.fieldName }}</el-checkbox>
                  </el-checkbox-group>


                  <el-select :id="custom.aavName" v-model="form[custom.aavName]" placeholder="请选择" v-if="custom.fieldType == 'radio'">
                    <el-option v-for="item in custom.childAttributes" :key="item.id" :label="item.fieldName" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <div v-if="custom.fieldType == 'checkbox'"></div>
              </span>
            </div>
            <div style="height: 60px;"></div>
            <div class="center">
              <el-button @click="close()">取消</el-button>
              <el-button type="primary" @click="submitForm('form')" v-loading="loading">保存</el-button>
            </div>
          </el-form>


      
    </div>

  </el-dialog>
</template>

<script>
import gameConfigApi from "@/api/gameConfig";
// import goodsListApi from "../../../api/gameConfig/goodsList";
import gameListApi from "@/api/gameConfig/gameList"
import gameDictionaryApi from "@/api/gameConfig/gameDictionary";
import {
  retailScreenAdd,
  retailScreenEdit,
  retailScreenByGameId
} from "@/api/info/rprice";
export default {
  name: "",
  components: {},
  data() {
    return {
      dialogVisible: false,
      loading: false,
      gameList: [],
      // 表单参数
      form: {
        type: "",
        systemIdList:[],
        carrierIdList:[],
        groupIdList:[],
        priceStart:'',
        priceEnd:'',
      },
      submitFormData:{
        gameName:'',
        gameId:'',
        content:''

      },
      gameId:'',
      attrs: [],
      rules: {
      },
      actived:'',
      GameSelectedType:'',
      sysList: [],
      carrierList: [],//运营商列表
      areaList: [],//大区列表
      serverList: [],//服务器列表
    };
  },
  methods: {
    // 打开弹窗
    async open(gameId) {
      this.dialogVisible = true;
      this.form={
        type: "",
        systemIdList:[],
        carrierIdList:[],
        groupIdList:[],
        priceStart:'',
        priceEnd:'',
      }
      // if(this.gameId == gameId){
      //   return
      // }
      this.loading = true
      // this.gameId = gameId
      await this.getGameList(gameId)
    },
    // tabs切换时触发
    tabChange(item,init) {
      this.form= {
        type: "",
        systemIdList:[],
        carrierIdList:[],
        groupIdList:[],
        priceStart:'',
        priceEnd:'',
      }
      this.submitFormData = {
        gameName:'',
        gameId:'',
        content:''
      }
      this.attrs = ''

      this.gameId = item.id;
      this.form.gameId = item.id
      this.form.gameType = item.type
      this.GameSelectedType = item.type
      this.submitFormData.gameId = item.id
      this.submitFormData.gameName = item.name
      this.form.gameName = item.name
      
      this.getAttrList();
      
    },
    // 游戏列表
    async getGameList(gameId) {
      let res = await gameListApi.getGameList()
      this.gameList = res.rows
      if (res.rows && res.rows.length) {
        this.tabChange(res.rows[0])
      }
    },

    // 获取系统列表
    getSysList() {
      gameDictionaryApi.getChildList({
        gameId: this.form.gameId,
        systemKey: 'system'
      }).then(res => {
        this.sysList = res.rows
      })
    },
    // 获取运营商列表
    getYysList(init,init2) {
      gameDictionaryApi.getChildList({
        gameId: this.form.gameId,
        systemKey: 'carrier'
      }).then(res => {
        this.carrierList = res.rows
        // if(init){
        //   this.getAreaList(init,init2)
        // }
      })
    },
    // // 运营商改变  获取大区列表
    // getAreaList(e,init) {
    //   let obj = {
    //     gameId: this.form.gameId,
    //     systemKey: 'group'
    //   }
      

    //   // 运营商改变 找出选择的运营商的对象
    //   if (e) {
    //     this.carrierList.forEach(i => {
    //       if (i.id == e) {
    //         obj.systemKey = i.systemKey + 'group'
    //       }
    //     })
    //   }
    //   gameDictionaryApi.getChildList(obj).then(res => {
    //     this.areaList = res.rows
    //     if(init){
    //       this.form.groupId = init
    //       this.getServiceList(init,true)
    //     }else{
    //       this.form.groupId = ''
    //       this.form.serverId = ''
    //     }
    //   })
    // },
    // // 大区改变  获取服务器列表
    // getServiceList(e,flag) {
    //   if(!flag){
    //     this.form.serverId = ''
    //   }

    //   if (e) {
    //     gameDictionaryApi.getList({
    //       parentId: e
    //     }).then(res => {
    //       this.serverList = res.rows
    //     })
    //   } else {
    //     this.serverList = []
    //   }
    // },
    //端游 直接获取大区
    getAreaList2(init) {
      let obj = {
        gameId: this.form.gameId,
        systemKey: 'group'
      }
      gameDictionaryApi.getChildList(obj).then(res => {
        this.areaList = res.rows
        // if(init){
        //   this.getServiceList(init)
        // }
      })
    },
    // 获取已配置的项
    getConfigByGame(gameId){
      let obj = {
        gameId:gameId
      }
      retailScreenByGameId(obj).then(res => {
        if(res.data){
          this.submitFormData = res.data
          if(this.submitFormData&&this.submitFormData.content){
            Object.assign(this.form,JSON.parse(this.submitFormData.content))
          }
        }
        if (this.GameSelectedType === 0) {
          // 手游
          // 获取系统列表和运营商列表
          this.getSysList()
          // let carrierId = this.form.carrierId?this.form.carrierId:''
          // let groupId = this.form.groupId?this.form.groupId:''
          this.getYysList()
        } else {
          // 端游
          // 获取大区列表
          // let groupId = this.form.groupId?this.form.groupId:''
          this.getAreaList2()
        }
        
      })
    },
    // 获取游戏属性列表
    getAttrList() {
      this.loading = true
      gameConfigApi.getGameConfig({ gameId: this.form.gameId }).then(res => {
        this.loading = false
        if (res.code == 200) {
          let attrs = res.rows
          if (attrs.length) {
            attrs.forEach(r => {
              if (r.fieldType == 'checkbox'&&r.isEnable=='0') {
                this.$set(this.form, r.aavName+'rander',  [])
                this.$set(this.form, r.aavName,  '')
              }else if(r.fieldType == 'date'&&r.isEnable=='0'){
                this.$set(this.form, r.aavName+'temp',  [])
                this.$set(this.form, r.aavName,  '')
              }else if(r.fieldType == 'number'&&r.isEnable=='0'){
                this.$set(this.form, r.aavName+'start',  undefined)
                this.$set(this.form, r.aavName+'end',  undefined)
                this.$set(this.form, r.aavName,  '')
              } else if(r.isEnable=='0') {
                this.$set(this.form, r.aavName, '')
              }
            });
          }
          this.attrs = JSON.parse(JSON.stringify(attrs))
          this.getConfigByGame(this.form.gameId)
        }
      });
    },
    // 多选项改变
    checkboxChange(e,key){
      // ////console.log("%c Line:474 🍊 e", "color:#6ec1c2", e);
      if(e&&e.length){
        this.form[key] = e.join(',')
      }else{
        this.form[key] = ''
      }
    },
    // 日期选择改变
    dateChange(e,key){
      if(e&&e.length==2){
        this.form[key] = e[0]+'==='+e[1]
      }else{
        this.form[key] = ''
      }
    },
    // 重置
    reset() {
     
      this.resetForm()
      this.getAttrList()
    },
    submitForm(formName) {
      // 将自定义字段的多选项转成字符串
      if (this.attrs.length) {
        this.attrs.forEach(r => {
           // 将数字类型的字段拼接成 xx===xx 的形式
           if (r.fieldType == 'number') {
            let sta = this.form[r.aavName+'start']||''
            let end = this.form[r.aavName+'end']||''
            if(sta||end){
              this.form[r.aavName] = sta+'==='+end
            }else{
              this.form[r.aavName] = ''
            }
         }
        });
      }
      this.submitFormData.content = JSON.stringify(this.form)
      
      if(this.submitFormData.id){
        // 编辑
        retailScreenEdit(this.submitFormData).then(res=>{
          this.$message.success(res.msg)
          this.$emit('change',JSON.stringify(this.form),this.form.gameId)
          this.close()
        })
      }else{
        retailScreenAdd(this.submitFormData).then(res=>{
          this.$message.success(res.msg)
          this.$emit('change',JSON.stringify(this.form),this.form.gameId)
          this.close()
        })
      }
      
      
    },
    close() {
      this.attrs = ''
      this.form = {}
      this.submitFormData = {}
      this.dialogVisible = false;
    },
    resetForm() {
      this.$refs['form'].resetFields();
    }
  }
};
</script>
<style scoped lang="scss">
.center {
  width: 100%;
  background: #fff;
  padding: 10px 0;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 99;
}
.form-box {
 
  padding-top: 70px;
}
/* 自定义游戏选择组件 */
.tab-box{
  width: calc(100% - 60px);
  overflow-y: auto;
  position: absolute;
  top: 0;
  left: 20px;
  background-color: #fff;
  z-index: 99;
  // border: 1px solid #88a6ff;
  // border-radius: 10px;
  padding: 10px 0;
  .tab-cont{
    flex-wrap: nowrap;
  }
  .tab{
    padding: 3px 10px;
    flex-shrink: 0;
    border-radius: 3px;
    border: 1px solid #ccc;
    margin-right: 10px;
    cursor: pointer;
    &.active {
      background-color: $primary;
      border-color: $primary;
      color: $fff;
    }
  }

}


.demo-ruleForm{
  padding: 0 15px;
}
::v-deep .el-checkbox{
  width: 170px;
}
::v-deep .el-dialog__body{
  padding: 0;
  position: relative;
}

::v-deep .form-box .el-input {
  width: 250px;
}

::v-deep .form-box .lattle-input .el-input {
  width: 170px;
}

::v-deep .form-box .lattle-input2 .el-input {
  width: 110px;
}

::v-deep .form-box .big-input .el-input {
  width: 100%;
}

::v-deep .form-box .el-form-item__content {
  max-width: 1003px;
}
::v-deep .form-box .number-input .el-input--medium{
  width: 100px;
}
::v-deep .el-input-number--medium{
  width: 100px;
}
.number-input{
  width: 250px;
}


/* 设置滚动条的宽度为10px，并且颜色为红色 */
.tab-box::-webkit-scrollbar {
  width: 10px;
}
 
/* 设置滚动条滑块的颜色为绿色 */
.tab-box::-webkit-scrollbar-thumb {
  background-color: #5982ffa8;
  border-radius: 10px;
}
 
/* 设置滚动条轨道的颜色为蓝色 */
.tab-box::-webkit-scrollbar-track {
  background-color: #5982ff2d;
  border-radius: 10px;
}
</style>
